<template>
  <view class="education-container">
    <!-- 顶部标题和导航 -->
    <view class="header">
      <view class="tab-navigation">
        <view 
          class="tab-item" 
          :class="{ 'active': currentTab === 'online' }"
          @click="switchTab('online')"
        >
          在线课堂
        </view>
        <view 
          class="tab-item" 
          :class="{ 'active': currentTab === 'offline' }"
          @click="switchTab('offline')"
        >
          线下活动
        </view>
      </view>
    </view>

    <!-- 在线课堂内容 -->
    <view class="content-section" v-if="currentTab === 'online'">
      <view class="course-section">
        <view class="section-title">学习交流群</view>
        <view class="course-list">
          <view class="course-item" v-for="course in courseList" :key="course.id" @click="enterCourse(course)">
            <view class="course-image">
              <image :src="course.image" class="course-img" />
            </view>
            <view class="course-info">
              <view class="course-title">{{ course.title }}</view>
              <view class="course-meta">
                <text class="course-author">{{ course.author }}</text>
                <text class="course-students">icon {{ course.students }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 线下活动内容 -->
    <view class="content-section" v-if="currentTab === 'offline'">
      <view class="activity-grid">
        <view class="activity-item" v-for="activity in activityList" :key="activity.id" @click="joinActivity(activity)">
          <view class="activity-image">
            <image :src="activity.image" class="activity-img" />
          </view>
          <view class="activity-info">
            <view class="activity-title">{{ activity.title }}</view>
            <view class="activity-meta">
              <text class="activity-author">{{ activity.author }}</text>
              <text class="activity-participants">icon {{ activity.participants }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 学习群详情页面 -->
    <view class="chat-detail" v-if="showChatDetail">
      <view class="chat-header">
        <text class="back-btn" @click="closeChatDetail">‹</text>
        <text class="chat-title">健康学习群(20)</text>
        <text class="chat-action">📋</text>
      </view>

      <view class="chat-messages">
        <view class="message-item" v-for="message in chatMessages" :key="message.id">
          <view class="message-avatar">
            <image :src="message.avatar" class="avatar" />
          </view>
          <view class="message-content">
            <view class="message-user">{{ message.user }}</view>
            <view class="message-text">{{ message.content }}</view>
            <view class="message-time">{{ message.time }}</view>
          </view>
        </view>
      </view>

      <view class="chat-input">
        <input 
          type="text" 
          placeholder="请输入消息..."
          class="input-field"
          v-model="inputMessage"
        />
        <text class="send-btn">📤</text>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="bottom-nav-section" v-if="!showChatDetail">
      <view class="nav-buttons">
        <view class="nav-button" @click="navigateToTab('home')">
          <text class="nav-icon">🏠</text>
          <text class="nav-label">首页</text>
        </view>
        <view class="nav-button" @click="navigateToTab('community')">
          <text class="nav-icon">👥</text>
          <text class="nav-label">社区</text>
        </view>
        <view class="nav-button active">
          <text class="nav-icon">📚</text>
          <text class="nav-label">教育</text>
        </view>
        <view class="nav-button" @click="navigateToTab('profile')">
          <text class="nav-icon">👤</text>
          <text class="nav-label">我的</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EducationPage',
  data() {
    return {
      currentTab: 'online',
      showChatDetail: false,
      inputMessage: '',
      courseList: [
        {
          id: 1,
          title: '"中医齐鸣，台传播与健康管理"',
          author: '不忘初心',
          students: '4656',
          image: '/static/images/course1.png'
        },
        {
          id: 2,
          title: '"写学的爷爷和他们的中国传统手工艺"',
          author: '不忘初心',
          students: '4656',
          image: '/static/images/course2.png'
        }
      ],
      activityList: [
        {
          id: 1,
          title: '"中医齐鸣，台传播与健康管理"',
          author: '不忘初心',
          participants: '4656',
          image: '/static/images/activity1.png'
        },
        {
          id: 2,
          title: '注册备客制造对话与健康感恩',
          author: '不忘初心',
          participants: '1221',
          image: '/static/images/activity2.png'
        },
        {
          id: 3,
          title: '太极剑禅修了佛教的诊断',
          author: '不忘初心',
          participants: '1221',
          image: '/static/images/activity3.png'
        }
      ],
      chatMessages: [
        {
          id: 1,
          user: '张客客',
          content: '太级客了翻，那你为没怎么还今晚里程法，非常感谢',
          time: '09:39',
          avatar: '/static/images/avatar1.png'
        },
        {
          id: 2,
          user: '学员朋思素',
          content: '那合问，医生，我该好行头？网上丰富啊医了',
          time: '09:39',
          avatar: '/static/images/avatar2.png'
        },
        {
          id: 3,
          user: '学员朋思素',
          content: '有失调，下肢天无，认真功能下蹲客每款功效',
          time: '09:39',
          avatar: '/static/images/avatar3.png'
        }
      ]
    }
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab
    },

    enterCourse(course) {
      this.showChatDetail = true
    },

    joinActivity(activity) {
      uni.showToast({
        title: `参加${activity.title}`,
        icon: 'none'
      })
    },

    closeChatDetail() {
      this.showChatDetail = false
    },

    // 导航到底部Tab
    navigateToTab(tabName) {
      if (tabName === 'home') {
        uni.switchTab({
          url: '/pages/home/index'
        })
      } else {
        const routes = {
          'community': '/pages/community/index',
          'profile': '/pages/profile/index'
        }
        
        const path = routes[tabName]
        if (path) {
          uni.navigateTo({
            url: path
          }).catch(() => {
            uni.showToast({
              title: '功能开发中',
              icon: 'none'
            })
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.education-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx; // 为底部导航留空间
}

// 顶部导航
.header {
  background: white;
  padding: 40rpx 32rpx 0;
}

.tab-navigation {
  display: flex;
  border-bottom: 2rpx solid #f0f0f0;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 32rpx;
  color: #666;
  position: relative;
  
  &.active {
    color: #4CAF50;
    font-weight: 500;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background: #4CAF50;
      border-radius: 2rpx;
    }
  }
}

// 内容区域
.content-section {
  padding: 32rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 24rpx;
}

// 课程列表
.course-list {
  
}

.course-item {
  background: white;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.course-image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 24rpx;
}

.course-img {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.course-info {
  flex: 1;
}

.course-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 16rpx;
  line-height: 1.3;
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.course-author, .course-students {
  font-size: 24rpx;
  color: #666;
}

// 活动网格
.activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.activity-item {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.activity-image {
  width: 100%;
  height: 200rpx;
}

.activity-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-info {
  padding: 24rpx;
}

.activity-title {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 16rpx;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.activity-author, .activity-participants {
  font-size: 22rpx;
  color: #666;
}

// 聊天详情
.chat-detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 40rpx 32rpx;
  background: white;
  border-bottom: 2rpx solid #f0f0f0;
  position: relative;
}

.back-btn {
  font-size: 48rpx;
  color: #4CAF50;
  position: absolute;
  left: 32rpx;
}

.chat-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.chat-action {
  position: absolute;
  right: 32rpx;
  font-size: 40rpx;
  color: #4CAF50;
}

.chat-messages {
  flex: 1;
  padding: 32rpx;
  overflow-y: auto;
}

.message-item {
  display: flex;
  margin-bottom: 32rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.message-avatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 24rpx;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 40rpx;
}

.message-content {
  flex: 1;
}

.message-user {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.message-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8rpx;
}

.message-time {
  font-size: 22rpx;
  color: #999;
}

.chat-input {
  padding: 24rpx 32rpx;
  border-top: 2rpx solid #f0f0f0;
  display: flex;
  align-items: center;
}

.input-field {
  flex: 1;
  background: #f5f5f5;
  border-radius: 25rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #333;
  border: none;
  margin-right: 16rpx;
}

.send-btn {
  font-size: 32rpx;
  color: #4CAF50;
}

// 底部导航
.bottom-nav-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 2rpx solid #f0f0f0;
  padding: 16rpx 0;
  z-index: 1000;
}

.nav-buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8rpx 16rpx;
  color: #999;
  transition: all 0.3s;
  
  &.active {
    color: #4CAF50;
  }
}

.nav-icon {
  font-size: 44rpx;
  margin-bottom: 8rpx;
}

.nav-label {
  font-size: 20rpx;
  line-height: 1;
}
</style>